<script setup lang="ts">
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import { DraggableContainer } from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import chartParts from '@/components/echarts/chart-parts.vue'
import { onMounted, reactive, ref } from 'vue'
const noRef = ref(null)
const data = reactive({
  chartList: [
    {
      id: 1,
      type: 'bar',
      width: 200,
      height: 200
    },
    {
      id: 2,
      type: 'pree',
      width: 200,
      height: 200
    }
  ],
  isGridShow: false,
  isBorShow: false,
  x: 0,
  y: 0,
  vLine: [],
  hLine: []
})
// 单击组件
const onActivated = () => {
  data.isBorShow = true
}
// 单击组件失去焦点
const onDeactivated = () => {
  data.isBorShow = false
}
//拖拽组件大小
const onResize = (obj: { x: number; y: number; w: number; h: number }) => {
  // data.x = obj.x
  // data.y = obj.y
  // data.width = obj.w
  // data.height = obj.h
}
//拖动组件开始
const onDrag = (obj) => {
  data.x = obj.x
  data.y = obj.y
  data.isGridShow = true
  data.isBorShow = true
}
//拖动组件完成
const onDragstop = () => {
  data.isGridShow = false
  data.isBorShow = false
}
onMounted(() => {
  // debugger
  // noRef.value.drawLine()
})
</script>
<template>
  <div class="body_main">
    <div class="grid" v-show="data.isGridShow"></div>
    <DraggableContainer>
      <template v-for="(item, index) in data.chartList" :key="index">
        <Vue3DraggableResizable
          :w="item.width"
          :h="item.height"
          :x="50"
          :y="50"
          :draggable="true"
          :resizable="true"
          :min-width="200"
          :min-height="200"
          :parent="true"
          :grid="[10, 10]"
          :class-name="data.isBorShow ? 'gogo' : 'aa'"
          :snap="true"
          @drag-start="onDrag"
          @resizing="onResize"
          @drag-end="onDragstop"
          @activated="onActivated"
          @deactivated="onDeactivated"
        >
          <component
            :is="chartParts"
            :type="item.type"
            :id="item.id"
            :width="item.width"
            :height="item.height"
            :key="index"
          ></component>
        </Vue3DraggableResizable>
      </template>
    </DraggableContainer>
  </div>
</template>
<style lang="scss" scoped>
.body_main {
  background-color: white;
  height: 100%;
  width: 70%;
  position: relative;
  overflow: hidden;
  .node_main {
    width: 100%;
    height: 100%;
  }
  .test3 {
    background-color: rgb(174, 213, 129);
  }
  .text-event {
    width: 100%;
    height: 100%;
  }
  .grid {
    float: left;
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) !important;
    background-size: 10px 10px, 10px 10px;
  }
  .p-event {
    float: left;
    height: 400px;
    width: 400px;
    /* border: 1px solid blue; */
    position: relative;
    margin-left: 20px;
  }

  .gogo {
    border: 1px solid #000;
    color: #000;
    position: absolute;
  }
  .aa {
    border: none;
    color: #000;
    position: absolute;
  }
}
</style>